import React, { useContext, useEffect, useState } from 'react';
import { Empty, Table } from 'antd';
import { openMaterielColumns } from './DetailTableColumns';
import { ToAssetControllerAPI } from '../common/type';
import { ChangeControllerContext } from '../common/useOAContext';
import Cls from 'classnames';

/**
 * @UpdatePackList OA详情材料表格
 * @param packList 表格数据
 * @returns
 */
const UpdatePackList: React.FC<ToAssetControllerAPI.IUpdatePackListProps> = ({ packList }) => {
  const { prefixCls, styleFixCls } = useContext(ChangeControllerContext);
  const [dataSource, setDataSource] = useState<Record<string, any>[]>([]); /** 表格数据 */

  /** 查询申请详情，并回显数据 */
  useEffect(() => {
    if (packList?.length) setDataSource(packList);
  }, [packList]);

  return (
    <div className="descriptionsType-rootBoxDiv">
      {/* <div className="descriptionsType-rootBoxDiv-formTableTitleTypography" style={{ textAlign: 'center', height: 50, border: '1px solid #fafafa' }}>
        <span>材料信息</span>
      </div> */}
      <div className={Cls('list-table', 'UpdatePackTable')}>
        {dataSource.length > 0 ? (
          <Table scroll={{ x: 1200, y: '' }} bordered size="small" dataSource={dataSource} columns={openMaterielColumns()} rowKey={'id'} pagination={false} />
        ) : (
          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
        )}
      </div>
    </div>
  );
};

export default UpdatePackList;
